import * as index from '@/api/index.js'
import {
	baseURL
} from '@/common/config.js'
export default {
	data() {
		return {
			id: '',
			num: 0,
			info: {},
			imageArr: [],
			canvasList: []
		}
	},

	onShow() {

	},
	onLoad(option) {
		this.id = option.id
		this.getOrderDetail()
	},

	methods: {
		getOrderDetail() {
			index.getOrderDetail({
				order_id: this.id
			}).then(res => {
				this.info = res.data
				this.imageArr = res.data.images_array
			})
		},
		workTime(time) {
			let date = new Date(time * 1000);
			let year = date.getFullYear();
			// 在日期格式中，月份是从0开始的，因此要加0，使用三元表达式在小于10的前面加0，以达到格式统一  如 09:11:05
			let month = date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
			let day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
			let hours = date.getHours() < 10 ? "0" + date.getHours() : date.getHours();
			let minutes = date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes();
			// let seconds = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
			// 拼接
			// return year + "-" + month + "-" + day + " " + hours + ":" + minutes + ":" + seconds;
			return year + "-" + month + "-" + day + " " + hours + ":" + minutes;
		},
		chooseImage() {
			uni.chooseMedia({
				count: 8 - this.imageArr.length,
				mediaType: ['image'],
				sourceType: ['album', 'camera'],
				sizeType:['compressed'],
				maxDuration: 30,
				camera: 'back',
				success: (res) => {
					if(this.imageArr.length != 8){
						this.num = this.num + res.tempFiles.length
					}
					res.tempFiles.forEach(item => {
						console.log(item.size);
						uni.showLoading({
							title: '上传中',
							mask: true
						})
						if (item.size >= 5242880) {
							uni.hideLoading()
							uni.showToast({
								title: '最大允许上传文件大小:5M',
								icon: 'none',
								mask: true,
								duration: 1000
							})
						} else {
							this.getImageInfo(item.tempFilePath)
						}
					})

				}
			})
		},
		//压缩图片固定宽高
		getImageInfo(filePath) {
			uni.getImageInfo({
				src: filePath,
				success: (res) => {
					this.canvasList.push(res)
					this.createCanvasContext(res, this.canvasList.length - 1)
				}
			})
		},
		// 绘制海报加水印
		createCanvasContext(info, index) {
			var url = '../../../../static/home/shuiyin.png'
			console.log(info);
			const ctx = uni.createCanvasContext('canvasId' + index, this)
			// 清理画布
			ctx.clearRect(0, 0, info.width, info.height)
			ctx.beginPath()
			//绘制背景图
			ctx.drawImage(info.path, 0, 0, info.width, info.height)
			//添加水印
			ctx.drawImage(url, info.width - info.width / 4, info.height - info.width / 7.5, info.width / 4, info.width /
				7.5)
			ctx.draw(false, () => {
				this.canvasToTempFilePath(index)
			})
		},
		//保存图片
		canvasToTempFilePath(index) {
			uni.canvasToTempFilePath({
				canvasId: 'canvasId' + index,
				success: (res) => {
					console.log('保存图片', res);
					// 压缩图片
					uni.compressImage({
						src: res.tempFilePath,
						quality: 80,
						compressedWidth: 426,
						success: (resn) => {
							console.log('压缩图片',resn.tempFilePath)
							this.uploadFile(resn.tempFilePath,index)
						}
					})
				}
			})
		},
		//上传图片
		uploadFile(e, index) {
			uni.uploadFile({
				url: baseURL + 'common/upload', //仅为示例，非真实的接口地址
				filePath: e,
				name: 'file',
				formData: {
					'user': 'test',
					'Content-type': 'application/json',
					'token': uni.getStorageSync('token'),
				},
				success: (images) => {
					console.log(JSON.parse(images.data));
					var obj = JSON.parse(images.data)
					if (obj.code == 1) {
						this.imageArr.push(obj.data.fullurl)
						if(this.imageArr.length == this.num){
							uni.hideLoading()
						}
					} else {
						uni.hideLoading()
						uni.showToast({
							title: obj.msg,
							icon: 'none',
							mask: true,
							duration: 1000
						})
						this.canvasList.splice(index, 1)
					}
				}
			})
		},
		submit() {
			uni.showModal({
				title: '提示',
				content: '是否提交订单',
				success: (res) => {
					if (res.confirm) {
						if (this.imageArr.length == 8) {
							let form = {}
							form.images = this.imageArr.join()
							form.order_id = this.id
							index.uploadImages(form).then(res => {
								this.$tools.back(1)
							})
						} else {
							console.log('请上传8张照片');
							// this.$tools.navigate('请上传8张照片')
							uni.showToast({
								title: '请上传8张照片',
								icon: 'none',
								mask: true,
								duration: 1000
							})
						}
					} else if (res.cancel) {

					}
				}
			});
		}
	}
}